<template>
  <div id="test" class="test-view">
    <div class="main-map">
      <Map ref="mapRef" @map-loaded="onMapLoaded" @full-screen="handleFullScreen('test')" />
    </div>
    <div class="mark-btn">
      <CesiumButton type="primary" @click="handleMark('point')">
        <span>点</span>
      </CesiumButton>
      <CesiumButton type="primary" @click="handleMark('line')">
        <span>线</span>
      </CesiumButton>
      <CesiumButton type="primary" @click="handleMark('polygon')">
        <span>面</span>
      </CesiumButton>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import * as Cesium from "cesium";

const mapRef = ref(null);

let cesiumTools = null;
let viewer = null;

// 处理测量类型选择
const handleMark = (type) => {
  cesiumTools.startMark(type)
}


const handleClick = (entity, position, flag) => {
};

// 地图加载完成的回调
const onMapLoaded = (tools, cesiumViewer) => {
  try {
    cesiumTools = tools;
    viewer = cesiumViewer;

    tools.addClickEvent(handleClick);

  } catch (error) {
    console.error("Error in onMapLoaded:", error);
  }
};

// 添加全屏处理方法
const handleFullScreen = id => {
  cesiumTools.divFullScreen(id);
};

// 组件销毁时清理资源
onBeforeUnmount(() => {
  cesiumTools.destroy();
});
</script>

<style scoped lang="scss">
.test-view {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.main-map {
  width: 100%;
  height: 100%;
}

.mark-btn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 100;
}
</style>